/* ==========================================================================
   BLUEPRINTS
   ========================================================================== */

.blueprint-section {
    @apply p-2 min-h-40 outline-none w-full;

    &.draggable-source--is-dragging {
        opacity: 0.5;
    }

    &.draggable-mirror .blueprint-section-card {
        @apply shadow-lg;
    }
}

.blueprint-drag-handle {
    @apply flex-none w-4 ltr:border-r rtl:border-l dark:border-dark-500 cursor-move;
    background: rgba(0, 0, 0, 0.01) url('../../svg/icons/light/drag-dots.svg') 50% 50% no-repeat;
    background-size: 7px 17px;
}

.blueprint-section-field {
    @apply relative mb-2 px-1 z-10 outline-none text-sm;

    .blueprint-section-field-inner {
        @apply relative border rounded bg-gray-200 shadow-sm flex outline-none z-10;
        @apply dark:border-none dark:shadow-dark dark:bg-dark-600
    }

    &.draggable-source--is-dragging {
        opacity: 0.5;
    }

    &.draggable-mirror .blueprint-section-field-inner {
        @apply shadow-lg;
    }
}

.blueprint-section-import {
    &:before {
        content: '';
        @apply border rounded absolute bg-gray-200 shadow-sm;
        top: -3px; left: 6px ; right: 0 ; bottom: 3px; z-index: 1;

        [dir="rtl"] & { left: 0 ; right: 6px ; }

        .dark & {
            @apply border-dark-300 bg-dark-550;
        }
    }
}

/*  These are applied here rather than the utility classes so they don't override */
/*  the inline widths defined by the draggable library. */
.blueprint-section-field-w-1\/4 { @apply w-1/4 };
.blueprint-section-field-w-1\/3 { @apply w-1/3 };
.blueprint-section-field-w-1\/2 { @apply w-1/2 };
.blueprint-section-field-w-2\/3 { @apply w-2/3 };
.blueprint-section-field-w-3\/4 { @apply w-3/4 };
.blueprint-section-field-w-full { @apply w-full };

.blueprint-add-section-container {
    @apply p-2 flex min-h-40;

    .draggable-container--is-dragging & {
        display: none;
    }
}

.blueprint-add-section-button {
    @apply relative w-full border border-gray-500 dark:border-dark-200 border-dashed rounded-lg flex justify-center items-center text-gray-700 dark:text-dark-150;

    &:hover {
        @apply border-gray dark:border-dark-175 text-gray-950 dark:text-dark-100;
    }

    .blueprint-section-draggable-zone {
        @apply absolute inset-0 p-4;
    }

    .blueprint-section-field {
        @apply bg-white;
    }
}

.fieldtype-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
